<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>当当网图书榜</title>
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
            img{
                vertical-align:middle;
            }
            .clearfix:after{
                clear:both;
                content:"";
                display:table;
            }
            .fl{
                float:left;
            }
            .fr{
                float:right;
            }
            .content{
                width:960px;
                margin:10px auto;
                font-size:12px;
                font-family:Verdana 宋体;
            }
            li{
                list-style:none;
            }
            .top{
                margin-bottom:10px;
            }
            .rob{
                position:relative;
                margin-top:25px;
            }
            .rob li{
                margin:auto 10px;
            }
            .rob ul{
                height:30px;
                line-height:30px;
                background:#eafffa;
                text-align:center;
                border:1px solid #c8ece3;
            }
            .top a{
                text-decoration: none;
                color:#666;
            }
            .nav a{
                text-decoration: none;
                color:#fff;
            }
            a:hover{
                text-decoration: underline;
            }
            .rob img{
                position:absolute;
                left:10px;
                top:-10px;
            }
            .nav ul{

                text-align:center;
                background:#fe6915;
            }
            .nav li{
                height:40px;
                line-height:40px;
                margin:auto 15px;
                padding-left:3px;
            }
            .nav{
                margin-bottom:10px;
            }
            .banner{
                margin-bottom:20px;

            }
            .subject{
               border:2px solid #cce9ac;
                position:relative;
            }
            .subject .pic{
                position:absolute;
                top:10px;
                left:-12px;
            }
            .subject .left{
                width:530px;
                margin-top:100px;
                margin-right:10px;
                margin-bottom:20px;

            }
            .subject .right{
                width:380px;
                margin:100px 10px 0 10px ;
            }
            .subject .txt{
                width:260px;
                height:20px;
                line-height:20px;

            }
            .subject .right .txt{
                margin-left:10px;
            }

            .subject .left .book1{
                width:180px;
                margin-right:10px;
                position:relative;
            }
            .subject .left .book1 .pic1{
                position:absolute;
                top:-5px;
                left:20px;
            }
            .subject .right .roof .book2{
                position:relative;

            }
            .subject .right .base .book3{
                position:relative;

            }
            .subject .right .roof .book2 .pic2{
                position:absolute;
                top:-5px;
                left:0;
            }
            .subject .right .base .book3 .pic3{
                position:absolute;
                top:-5px;
                left:0;

            }
            .subject .right .roof{
                margin-bottom:40px;
            }
            .subject .txt h4{
                font-size:14px;
                color:#1a66b3;
                font-weight:400;
            }
            p{
                margin-top:5px;
            }
            p .money{
                color:#aa112b;
                font-weight:700;

            }
            p .discount{
                color:#5ea593;
                font-weight:700;
                margin-left:5px;

            }
            .bottom{
                width:960px;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <!--头部开始-->
            <div class="top clearfix">
                <div class="logo fl">
                    <img src="images/logo.jpg"/>
                </div>
                <div class="rob fr ">
                    <ul class="clearfix">
                        <li class="fl"><a href="#">尾品汇</a></li>
                        <li class="fl"><a href="#">当当优品</a></li>
                        <li class="fl"><a href="#">数字馆</a></li>
                        <li class="fl"><a href="#">都看阅器</a></li>
                        <li><img src="images/icon_count.png"/></li>
                    </ul>
                </div>
            </div>
            <!--头部结束-->
            <!--nav开始-->
            <div class="nav">
                <ul class="clearfix">
                    <li class="fl"><a href="#">首页</a></li>
                    <li class="fl"><a href="#">图书</a></li>
                    <li class="fl"><a href="#">音像</a></li>
                    <li class="fl"><a href="#">童装</a></li>
                    <li class="fl"><a href="#">服装</a></li>
                    <li class="fl"><a href="#">鞋靴</a></li>
                    <li class="fl"><a href="#">运动</a></li>
                    <li class="fl"><a href="#">箱包</a></li>
                    <li class="fl"><a href="#">美妆</a></li>
                    <li class="fl"><a href="#">珠宝</a></li>
                    <li class="fl"><a href="#">家居</a></li>
                    <li class="fl"><a href="#">食品</a></li>
                    <li class="fl"><a href="#">酒</a></li>
                    <li class="fl"><a href="#">手机</a></li>
                    <li class="fl"><a href="#">数码</a></li>
                    <li class="fl"><a href="#">电脑</a></li>
                    <li class="fl"><a href="#">家电</a></li>
                </ul>
            </div>
            <!--nav结束-->
            <!--banner开始-->
            <div class="banner">
                <img src="images/banner.png"/>
            </div>

            <!--主体开始-->
            <div class="subject clearfix">
                <img src="images/bg_bang.gif" class="pic"/>
                <div class="left fl clearfix ">
                    <div class="fl book1">
                        <a href="#"><img src="images/book-01.jpg"/></a>
                        <img class="pic1" src="images/bookNo1.gif"/>
                    </div>
                    <div class="fr txt">
                        <h4>偷影子的人</h4>
                        <p>作者：[法]马克·李维（Marc Levy）著，段韵灵 译</p>
                        <p>出版社：湖南文艺出版社</p>
                        <p>当当价<span class="money">¥ 17.90</span></p>
                        <p>不知道姓氏的克雷儿。这就是你在我生命里的角色，我童年的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神美有应允的愿望。一个老是受班上同学欺负的瘦弱小男孩，因为拥有一种特殊能力而强大：他能"偷别人的影子'，因而能看见他</p>
                    </div>
                </div>
                <div class="right fr">
                    <div class="roof clearfix">
                        <div class="book2 fl">
                            <a href="#"><img src="images/book-02.jpg"/></a>
                            <img class="pic2" src="images/bookNo2.gif"/>
                        </div>
                        <div class="fl txt">
                            <h4>看见（央视知名记者、主持人柴静：十年个人成长的告白，中国社会变迁的备忘</h4>
                            <p>作者：柴静 著</p>
                            <p>出版社：广西示范大学出版社</p>
                            <p><span class="money">¥29.40</span><span class="discount">7.4折</span></p>
                        </div>
                    </div>
                    <div class="base clearfix">
                        <div class="book3 fl">
                            <a href="#"><img src="images/book-03.jpg"/></a>
                            <img class="pic3" src="images/bookNo3.gif"/>
                        </div>
                        <div class="txt fl">
                            <h4>改变孩子先改变自己</h4>
                            <p>作者：贾容韬 加盟毅 著</p>
                            <p>出版社：作家出版社</p>
                            <p><span class="money">¥22.20</span><span class="discount">7.4折</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <!--主体结束-->
            <!--尾部开始-->
            <div class="bottom">
                <p>Copyright&copy;当当网2004-2017，All Rights Reserved<img src="images/validate.gif"/>京ICP证041189出版社经营许可证 新出发京批字弟直0673号</p>
            </div>
            <!--尾部结束-->
        </div>
    </body>
</html>